<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改密码 | 机械配件商城</title>
    <link rel="stylesheet" type="text/css" href="./element-ui/index.css">
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
    <link rel="stylesheet" type="text/css" href="./components/min-width-container.css"/>
    <link rel="stylesheet" type="text/css" href="./components/footer-bottom.css"/>
    <link rel="stylesheet" type="text/css" href="./components/footer-image.css" />
    <link rel="stylesheet" type="text/css" href="./components/footer-link.css" />
    <link rel="stylesheet" type="text/css" href="./components/header-full.css" />
    <link rel="stylesheet" type="text/css" href="./components/user-frame.css" />
    <style>
        .app-title{
            border-bottom: 1px solid #EEEEEE;
            line-height: 2;
            font-weight: 900;
        }

        .app-form-wapper{
            width: 420px;
        }

        .app-form-wapper .el-form--inline .el-input{
            width: 93px;
        }

        .app-table, .app-form{
            padding: 0 40px;
        }

        .app-form-wapper-hint{
            width: 620px;
            border-radius: 4px;
            border: 1px solid #EDEDED;
            background: #FDFCE7;
            margin: 20px 0;
        }

        .app-form-wapper-hint > div{
            height: 54px;
            line-height: 54px;
        }
    </style>
</head>
<body>
<div id="app">
    <header-full :bordered="true"></header-full>
    <user-frame class="m-t-20">
        <div class="app-title text-2 text-important">修改密码</div>
        <div class="app-form-wapper-hint">
            <div class="text-4 text-general-1 p-l-20 p-r-20 ">
                <span class="text-2 m-r-8" style="font-weight:900; color:#F54F47;">请注意:</span>修改完密码请重新登录
            </div>
        </div>
        <div class="app-form">
            <div class="app-form-wapper">
                <el-form ref="form" :model="form" :rules="rules"  label-width="100px">
                    <el-form-item label="当前密码:" prop="password_current">
                        <el-input size="mini" v-model="form.password_current" ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码:" prop="password_new">
                        <el-input size="mini" v-model="form.password_new" ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码确认:" prop="password_confirmed">
                        <el-input size="mini" v-model="form.password_confirmed" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary" size="mini" @click="change_password">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </user-frame>
    <footer-image></footer-image>
    <footer-link></footer-link>
    <footer-bottom></footer-bottom>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./components/min-width-container.js"></script>
<script src="./components/footer-image.js"></script>
<script src="./components/footer-bottom.js"></script>
<script src="./components/footer-link.js"></script>
<script src="./components/header-full.js"></script>
<script src="./components/user-frame.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data(){
            return {
                addr_id: '',
                form: {
                    password_current: "",
                    password_new: "",
                    password_confirmed: "",
                },
                rules:{
                    password_current: [
                        { required: true, message: '请输入当前密码', trigger: 'blur' },
                        { min: 1, max: 16, message: '长度在 1 到 32 个字符', trigger: 'blur' }
                    ],
                    password_new: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
                    ],
                    password_confirmed:[
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        {
                            validator: (rule, value, callback) => {
                                if(this.form.password_new == this.form.password_confirmed){
                                    callback();
                                } else {
                                    callback("两次输入的密码不一致");
                                }
                            },
                            trigger: 'blur',
                        }
                    ],

                }
            };
        },
        methods: {
            change_password(){
                 this.$refs.form.validate((valid)=>{
                    if(valid){
                        const params = new URLSearchParams();
                        params.append("newpwd", this.form.password_new);
                        params.append("oldpwd", this.form.password_current);
                        axios.post("/user/updatepassword.do", params).then(response=>{
                            if(response.data.status === 0){
                                this.$message({
                                    message: "更新成功",
                                    type: "success"
                                });
                            }else{
                                if(response.data.msg){
                                    this.$message.error(response.data.msg);
                                }
                            }
                        }).catch(err=>{
                            console.log(err);
                            this.$message.error("连接服务器异常");
                        });
                    }
                 });
            }
        }
    });

</script>
</body>
</html>
